Hi Guys, In this post we will learn how to open confirm model box before deleting item in laravel 5 application. As we know very well delete operation is very command and basic feature of every web application. Also delete operation is very important part because if you remove item, post, product, category etc then it will remove from your browser. So we should always prefer to confirmation before remove item in laravel 6, laravel 7, laravel 8 and laravel 9 app.
There are several options available to use confirm like jquery ui confirm, sweetalert, bootbox, bootstrap confirmation etc jquery plugin. So we almost use bootstrap theme so it would always better if we use bootstrap plugin for this task. So In this example i am going to use bootstrap confirmation plugin for confirm box like toggle.
bootstrap-confirmation.js provide us very simple and better layout for confirm box and it’s simply use event of their plugin. So let’s see bellow full example and you can implement confirmation before delete record in your web application. you will get layout like as bellow screen shot.
Layout:
Step 1: Add Table and Dummy Records
I always prefer to give example from scratch, So in this example we will create “products” table with id, name, details, created_at and updated_at column. So you have to create table using migration and run that. After created successfully create table, make sure add some dummy data like as bellow:
Products Insert Query:
INSERT INTO `products` (`id`, `name`, `details`, `created_at`, `updated_at`) VALUES
(1, 'Product A', 'Product A Details', NULL, NULL),
(3, 'Product C', 'Product C Details', NULL, NULL),
(4, 'Product D', 'Product D Details', NULL, NULL),
(5, 'Product E', 'Product E Details', NULL, NULL),
(6, 'Product F', 'Product F Details', NULL, NULL);
Step 2: Add New Route
In this step, we are doing from scratch so we will add two routes, one for display data and another for delete request. So you have to simply add two new routes in your laravel application.
routes/web.php
Route::get('myproducts', 'ProductController@index');
Route::delete('myproducts/{id}', 'ProductController@destroy');
Step 3: Create ProductController
In third step, we will create new ProductController file to handle request of created two new route. In this Controller we define two method, index() and destroy(). Both method will handle route request. So let’s create new controller and put code:
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class ProductController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = DB::table("products")->get();
return view('products',compact('products'));
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
DB::table("products")->delete($id);
return response()->json(['success'=>"Product Deleted successfully.", 'tr'=>'tr_'.$id]);
}
}
Step 4: Create products blade file
In last step we will create products.blade.php file and write code of display products and jquery ajax code. In this file we added following css and js files:
1)bootstrap.min.css
2)bootstrap.min.js
3)jquery.min.js
4)bootstrap-confirmation.min.js
So, let’s create products.blade.php file and put bellow code:
resources/views/products.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5 - Confirmation before delete records from database example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<h3>Laravel 5 - Confirmation before delete records from database example</h3>
<table class="table table-bordered">
<tr>
<th width="80px">No</th>
<th>Product Name</th>
<th>Product Details</th>
<th width="100px">Action</th>
</tr>
@if($products->count())
@foreach($products as $key => $product)
<tr id="tr_{{$product->id}}">
<td>{{ ++$key }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->details }}</td>
<td>
<a href="{{ url('myproducts',$product->id) }}" class="btn btn-danger btn-sm"
data-tr="tr_{{$product->id}}"
data-toggle="confirmation"
data-btn-ok-label="Delete" data-btn-ok-icon="fa fa-remove"
data-btn-ok-class="btn btn-sm btn-danger"
data-btn-cancel-label="Cancel"
data-btn-cancel-icon="fa fa-chevron-circle-left"
data-btn-cancel-class="btn btn-sm btn-default"
data-title="Are you sure you want to delete ?"
data-placement="left" data-singleton="true">
Delete
</a>
</td>
</tr>
@endforeach
@endif
</table>
</div> <!-- container / end -->
</body>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function (event, element) {
element.trigger('confirm');
}
});
$(document).on('confirm', function (e) {
var ele = e.target;
e.preventDefault();
$.ajax({
url: ele.href,
type: 'DELETE',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
success: function (data) {
if (data['success']) {
$("#" + data['tr']).slideUp("slow");
alert(data['success']);
} else if (data['error']) {
alert(data['error']);
} else {
alert('Whoops Something went wrong!!');
}
},
error: function (data) {
alert(data.responseText);
}
});
return false;
});
});
</script>
</html>
Ok, now we are ready to run above example with great layout. So let’s run on following url: Site_URL+’/myproducts’.
I hope it can help you….
